<template>
	<view class="content relative" style="background-color: #fff;padding-top:250rpx;">
			<view class="fixed" @click="isshow2=false;isshow=false;isshow3=false;" style="width: 100%;height: 100vh;background-color: rgba(0,0,0,.5);top: 0;z-index: 1;" v-if="isshow2 || isshow || isshow3">
			</view>
		<view class="result fixed bgf" style="z-index: 999999;width: 100%;top: 0;">
			<view class="top">
				<u-navbar scrollable=false :placeholder='true' bgColor="#ffffff" :autoBack="true" title="">
					<view slot="right" class="input_right flex relative">
						<u-input suffixIcon="camera" prefixIconStyle="font-size: 22px;color: #909399"
							customStyle="background-color: #f5f5f5;" suffixIconStyle="color: #909399; width:48rpx;height:48rpx;" border="" v-model="search_key"
							@confirm="change" placeholder="请输入搜索内容" clearable  @clear="search_key='';change()">
						</u-input>
					</view>
				</u-navbar>
			</view>
			<view class="search_top" >
				<u-tabs :current="type" lineColor="#DD2131" activeStyle="color:#DD2131;"
					itemStyle="font-weight:500;font-size: 32rpx;width:33%;padding:0 0  20rpx 0;" :list="searchtype"
					@click="click"></u-tabs>
			</view>
			<!-- 根据滑块显示 -->
			<view class="all">
				<view class="all_top flex flexJBC fw5">
					<!-- 全部 -->
					<view v-if="type==0"  class="paddingLR32 flexJBC" style="width: 100%;">
						<view class="li co9 fontS28 " v-for="(item,index) in type1" @click="check(index)"
							style="margin-top: 20rpx;" :key="index">
							<view class="flex">
								<text :class="item.check?'active':''">{{item.name}}</text>
								<view class="flexcenter" v-if="index==2">
									<u-icon name="arrow-up-fill" size="5rpx"  :color="price=='asc'?'#333':'#999'" ></u-icon>
									<u-icon name="arrow-down-fill" size="5rpx" style='margin-top: 10rpx;' :color="price=='desc'?'#333':'#999'"></u-icon>
								</view>
								<image v-if="index==3" src="/static/images/search/shaixuan.png" mode="" style="width: 22rpx;height: 22rpx;"></image>
							</view>
						</view>
					</view>
					<!-- 店铺 -->
					<template v-if="type==1">
						<view class="li co9 fontS28" v-for="(item,index) in type2"  :key="index" @click="checksto(index)"
							style="width: 25%;text-align: center; margin-top: 20rpx;">
							<text :class="item.check?'active':''">{{item.name}}</text>
						</view>
					</template>
					<!-- 工厂 -->
					<template v-if="type==2">
						<view class="li co9 fontS28" v-for="(item,index) in type3"  :key="index" @click="check2(index)"
							style="width: 25%;text-align: center; margin-top: 20rpx;">
							<text :class="item.check?'active':''">{{item.name}}</text>
						</view>
					</template>
				</view>
				
				<view class="choice" style="margin-top: 30rpx;">
					<view class="li" style="padding: 0 4%; margin-bottom: 24rpx; " v-if="type==0&&isshow">
						<view class="title fontS28 co3 ">
							价格区间(元）
						</view>
						<view class="flex" style="margin-top: 24rpx;">
							<input type="text" v-model="down" placeholder="自定最低价" placeholder-class="co9" class=" fontS24  center"
								style="border-radius: 8rpx; background-color:#f5f5f5;height:72rpx;width:248rpx;">
							<text style="margin: 0 20rpx ;">——</text>
							<input type="text" v-model="up" placeholder="自定最高价"  placeholder-class="co9" class="fontS24  center"
								style="border-radius: 8rpx;background-color:#f5f5f5;height:72rpx;width:248rpx;">
						</view>
					</view>
					
					<!-- 店铺-->
					<view class="li" style="padding: 0 4%;" v-if="type==1&&isshow2">
						<view class="title fontS28 co3 ">
							开店时间
						</view>
						<view class="li_btn" style="margin-top: 24rpx; overflow: hidden;">
							<view class=" fontS24 co6 center" v-for="(item,index) in typeFact1"  :key="index" @click="check3(index)"
								:class="item.check?'activeFac':''"
								style=" line-height: 72rpx;box-sizing: border-box;border: 1rpx solid transparent; float: left; border-radius: 8rpx; background-color:#f5f5f5;height:72rpx;width:210rpx; ">
								{{item.name}}
							</view>
					
					
						</view>
					</view>
					<view class="li" style="padding: 0 4%;" v-if="type==1&&isshow2">
						<view class="title fontS28 co3 ">
							成交量
						</view>
						<view class="li_btn" style="margin-top: 24rpx; overflow: hidden;">
							<view class=" fontS24 co6 center" v-for="(item,index) in typeFact2"  :key="index" @click="check4(index)"
								:class="item.check?'activeFac':''"
								style=" line-height: 72rpx;box-sizing: border-box;border: 1rpx solid transparent; float: left; border-radius: 8rpx; background-color:#f5f5f5;height:72rpx;width:210rpx; ">
								{{item.name}}
							</view>
						</view>
					</view>
					
					<!-- 工厂 -->
					<view class="li" style="padding: 0 4%;" v-if="type==2&&isshow3">
						<view class="title fontS28 co3 ">
							开店时间
						</view>
						<view class="li_btn" style="margin-top: 24rpx; overflow: hidden;">
							<view class=" fontS24 co6 center" v-for="(item,index) in typeFact1"  :key="index" @click="check3(index)"
								:class="item.check?'activeFac':''"
								style=" line-height: 72rpx;box-sizing: border-box;border: 1rpx solid transparent; float: left; border-radius: 8rpx; background-color:#f5f5f5;height:72rpx;width:210rpx; ">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="li" style="padding: 0 4%;" v-if="type==2&&isshow3">
						<view class="title fontS28 co3 ">
							成交量
						</view>
						<view class="li_btn" style="margin-top: 24rpx; overflow: hidden;">
							<view class=" fontS24 co6 center" v-for="(item,index) in typeFact2" @click="check4(index)"
								:class="item.check?'activeFac':''"   :key="index"
								style=" line-height: 72rpx;box-sizing: border-box;border: 1rpx solid transparent; float: left; border-radius: 8rpx; background-color:#f5f5f5;height:72rpx;width:210rpx; ">
								{{item.name}}
							</view>
			
			
						</view>
					</view>
					
					
					<view class="all_btn flex" v-if="type==0&&isshow" style="margin-bottom: 40rpx;">
						<button @click="reset()">重置</button>
						<button @click="submit()">确认</button>
					</view>
					<view class="all_btn flex" v-if="type==1&&isshow2" style="margin-bottom: 40rpx;">
						<button @click="reset1()">重置</button>
						<button @click="submit1()">确认</button>
					</view>
					<view class="all_btn flex" v-if="type==2&&isshow3" style="margin-bottom: 40rpx;">
						<button @click="reset2()">重置</button>
						<button @click="submit2()">确认</button>
					</view>
				</view>
			</view>
		</view>
		<view class="result" :style="{marginTop:$store.state.tabh}">
			<view class="">
				<!-- 商品列表展示	 -->
				<view style="padding:30rpx 4%;background-color:#f5f5f5;overflow: hidden;" v-if="type==0">
					<List :showTopTitle="false" :list="goodList" v-if="goodList.length>0" />
					<u-empty width='162px' height="140px" :show='(goodList.length==0) && (!pageLoading)' marginTop="220rpx" ></u-empty>
				</view>   
				<!-- 店铺列表展示 -->
				<view style="background-color:#f5f5f5;padding-top: 20rpx" v-if="type==1">
					<view class="shop">
						<u-empty width='162px' height="140px" :show='storeList.length==0 && !pageLoading'  marginTop="200rpx"></u-empty>
						<view class="li" v-for="(item,indexx) in storeList" :key="indexx"
							@click="$my.go('/myPackageA/goodsAndFacton/store?store_id='+item.id)">
							<view class="li_top">
								<u-image :src="item.store_image" :lazy-load="true" height="80rpx" width="80rpx" radius='8rpx'>
								</u-image>
								<view class="box_center">
									<view class="title co3 fw6">{{item.store_name}}</view>
									<view class="flex">
										<u-rate gutter="2" count="5" v-model="item.postage_score" :allowHalf='true'
											size='24rpx' :readonly='true' activeColor='#FFC047'
											inactiveColor='rgba(255, 168, 72, 0.2)'>
										</u-rate>
										<text class="score">{{item.postage_score}}分</text>
										<text class="deal co9">已成交{{item.pay_number}}+</text>
									</view>
								</view>
								<view class="box_right">
									<u-button class="entry fontS24">进店</u-button>
								</view>
							</view>
							<view class="li_center">
								<u-scroll-list :indicator="false">
									<view v-for="(item, index) in item.product"  class="li_img"  :key="index"
										@click.stop="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+item.id)">
										<u-image :src="item.image" width="190rpx" height="190rpx" radius="16rpx"></u-image>
										<view class="money">
											<text class="fontS20">￥</text>
											<text>{{' '+item.price}}</text>
										</view>
									</view>
								</u-scroll-list>
							</view>
							<view class="li_bottom co9 fontS24 flexJBC">
								<view class="">
									<text class="">主营:</text>
									<text class="fontS24 " v-for="(text,index) in item.main_business" 
										:key="index">{{text}}<text v-if="index!=item.main_business.length-1" style="margin-left: 10rpx;margin-right: 10rpx;" >|</text></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 厂家列表展示 -->
				<view style="background-color:#f5f5f5;padding-top: 20rpx" v-if="type==2">
					<view class="padding32">
						<u-empty width='162px' height="140px" :show='factoryList.length==0 && !pageLoading' marginTop="168rpx"></u-empty>
						<view class="whiteBox mb24" style="" v-for="(itemm,index) in factoryList"  :key="index"
							@click="$my.go('/myPackageA/goodsAndFacton/store?store_id='+itemm.id)">
							<view class="inner_li">
								<view class="li_factory flexJBC">
									<view class="left">
										<u-image :src="itemm.store_image" width="200rpx" height="200rpx"
											radius="8rpx" />
									</view>
									<view class="right">
										<view class="li_box">
											<text class="co3 fw7 fontS28">{{itemm.store_name}}</text>
											<text class="float co9 fontS24">{{itemm.address}}</text>
										</view>
										<view class="flexJBC">
											<view class="">
												<text class="co3 fontS24 li_text"
													v-for="(text,index) in itemm.main_business" :key="index">
													<text>{{text}}</text>
													<text v-if="index !=itemm.main_business.length-1"
														style="margin-left: 10rpx;margin-right: 10rpx;">|</text>
												</text>
											</view>
											<text class="float co9 fontS20">已成交{{itemm.pay_number}}</text>
										</view>
										<view class="li_box flex">
											<view class="fontS24 co3" v-for="(text,index) in itemm.tags" :key="index"
												:class="index%2==0?'yellow':'pink'">
												{{text}}
											</view>
										</view>
										<view class="fontS24 co6 elipes2">{{itemm.store_info?itemm.store_info:'暂无门店简介'}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
		
	</view>
</template>
<script>
	import List from '@/componentes/list.vue'
	export default {
		data() {
			return {
				category_id:'', //购物车过来的分类id
				pageLoading:true,
				goodsPage:1,
				storePage:1,
				factPage:1,
				 
				search_key: '', //搜索值
				isshow: false, //全部-筛选显示
				isshow2: false, //店铺-筛选显示
				isshow3: false, //工厂-筛选展示
				type: '',
				down: '', //商品筛选最低价
				up: '', //商品筛选最高价
				time: '', //开店时间
				number: '', //成交量
				sales: '', //desc从高到低，asc从低到高
				price: '', //desc从高到低，asc从低到高
				custom_price: '', //价格区间
				goodList: [], //上坪列表
				storeList: [], //店铺列表
				factoryList: [], //工厂列表
				type1: [ //商品二级分类
					{
						name: '综合推荐',
						check: true
					},
					{
						name: '销量',
						check: false
					},
					{
						name: '价格',
						check: false
					},
					{
						name: '筛选',
						check: false
					},
				],
				type2: [ //店铺二级分类
					{
						name: '综合推荐',
						check: true
					},

					{
						name: '成交量',
						check: false
					},
					{
						name: '筛选',
						check: false
					},
				],
				type3: [ //工厂二级分类
					{
						name: '综合推荐',
						check: true
					},

					{
						name: '成交量',
						check: false
					},
					{
						name: '筛选',
						check: false
					},
				],
				typeFact1: [{ //工厂筛选条件年份
					name: '小于1年',
					check: false,
					number: '0,1'
				}, {
					name: '1~2年',
					check: false,
					number: '1,2'
				}, {
					name: '2~3年',
					check: false,
					number: '2,3'
				}, {
					name: '3~4年',
					check: false,
					number: '3,4'
				}, {
					name: '4年以上',
					check: false,
					number: '4'
				}, ],
				typeFact2: [{ //工厂筛选条件销量
					name: '0~5k',
					check: false,
					number: '0,5000'
				}, {
					name: '5k~1w',
					check: false,
					number: '5000,10000'
				}, {
					name: '1~2w',
					check: false,
					number: '10000,20000'
				}, {
					name: '2~4w',
					check: false,
					number: '20000,40000'
				}, {
					name: '4w+',
					check: false,
					number: '40000'
				}, ],
				searchtype: [{
					name: '全部',
				}, {
					name: '旗舰店',
				}, {
					name: '批发商'
				}]
			}
		},
		components: {
			List
		},
		onReachBottom() {
			if (this.type == 0) {
				this.goodsPage++;
				this.getgoods();
			} else if (this.type == 1) {
				this.storePage++;
				this.getStore()
			} else if (this.type == 2) {
				this.factPage++
				this.getFactory()
			}
		},
		methods: {
			reset() { //全部-筛选-重置
				this.up = ''
				this.down = ''
				this.custom_price = ''
				this.isshow=false;
				this.goodsPage=1;
				this.goodList=[];
				this.pageLoading=true;
				this.getgoods()	
			},
			//商品--筛选提交
			submit() {
				this.custom_price = this.down + ',' + this.up
				this.goodsPage=1;
				this.goodList=[];
				this.pageLoading=true;
				this.getgoods()
				this.isshow = false
			},
			reset2() { //工厂-筛选-重置
				this.typeFact1.forEach(item => {
						item.check = false
					}),
					this.typeFact2.forEach(item => {
						item.check = false
					})
					this.isshow3=false;
				this.factPage=1;
				this.factoryList=[];
				this.time='';
				this.number=''
				this.pageLoading=true;
				this.getFactory()	
			},
			//工厂--筛选提交
			submit2(item) {
				this.factPage=1;
				this.factoryList=[];
				this.pageLoading=true;
				this.getFactory()
				this.isshow3 = false
			},
			reset1() { //店铺-筛选-重置
				this.typeFact1.forEach(item => {
					item.check = false
				}),
				this.typeFact2.forEach(item => {
					item.check = false
				})
				this.isshow2=false;
				this.storePage=1;
				this.storeList=[];
				this.time='';
				 this.number=''
				 this.pageLoading=true;
				this.getStore()
					
			},
			//店铺--筛选提交
			submit1(item) {
				this.storePage=1;
				this.storeList=[];
				this.pageLoading=true;
				this.getStore()
				this.isshow2 = false
			},
			
			change(e) {
				console.log('change', e);
				this.pageLoading=true;
				if (this.type == 0) {
					this.goodsPage=1;
					this.goodList=[];
					this.getgoods()
				} else if (this.type == 1) {
					this.storeList=[]
					this.storePage=1;
					this.getStore()
				} else if (this.type == 2) {
					this.factPage=1;
					this.factoryList=[];
					this.getFactory()
				}
			},
			click(item) { //获取0全部1店铺2工厂
			  this.isshow=false;
			  this.isshow2=false;
			  this.isshow3=false;
			  this.storeList=[];
			  this.goodList=[];
			  this.factoryList=[];
			  this.page=1;
				console.log('item', item);
				this.time='',//时间
				this.number='',//成交量
				this.typeFact1.forEach(item=>{
					item.check=false
				})
				this.typeFact2.forEach(item=>{
					item.check=false
				})
				this.type = item.index
				console.log(this.type);
				this.pageLoading=true;
				if (this.type == 0) {
					this.getgoods()
				} else if (this.type == 1) {
					this.getStore()
				} else if (this.type == 2) {
					this.getFactory()
				}
			},
			check(index) { //商品二级分类选中
				this.type1.forEach(item => {
					item.check = false
				})
				if(index!=3){
					this.goodsPage=1;
					this.goodList=[];
				}
				this.type1[index].check = true
				if (index == 0) {
					this.isshow = false
					this.price = ''
					this.sales = ''
					this.custom_price = ''
					this.pageLoading=true;
					this.getgoods()
				} else if (index == 1) { //点击销量正反选
					this.isshow = false
					this.sales = this.sales == 'desc' ? 'asc' : 'desc'
					this.price = ''
					this.custom_price = '' 
					this.pageLoading=true;
					this.getgoods()
				} else if (index == 2) { //点击价格正反选
					this.isshow = false
					this.price = this.price == 'desc' ? 'asc' : 'desc'
					this.sales =''
					this.custom_price = ''
					this.pageLoading=true;
					this.getgoods()
				} else if (index == 3) { //点击筛选
					this.price = ''
					this.sales = ''
					this.isshow = true
					// this.submit()
				}
			},
			check2(index) { //工厂二级分类选择
				this.type3.forEach(item => {
					item.check = false
				})
				this.type3[index].check = true
				if (index == 2) {
					this.isshow3 = true
				} else {
					this.isshow3 = false
				}
			},

			check3(index) { //工厂筛选
				this.typeFact1.forEach(item => {
					item.check = false
				})
				this.typeFact1[index].check = true
				this.time = this.typeFact1[index].number
			},
			check4(index) { //工厂筛选
				this.typeFact2.forEach(item => {
					item.check = false
				})
				this.typeFact2[index].check = true
				this.number = this.typeFact2[index].number
			},
			checksto(index) { //店铺二级分类选择
				this.type2.forEach(item => {
					item.check = false
				})
				this.type2[index].check = true
				if (index == 2) {
					this.isshow2 = true
				} else {
					this.isshow2 = false
				}
			},
			// 获取商品列表
			getgoods() {
				console.log( this.search_key,99999999)
				this.$my.post('/index/Search/searchDataProduct', {
					page: this.goodsPage,
					limit: 10,
					sales: this.sales,
					price: this.price,
					custom_price: this.custom_price,
					search_key: this.search_key?this.search_key:'',
					category_id:this.category_id,
				}).then(res => {
					this.pageLoading=false;
					if (res.code == 200) {
						this.goodList =this.goodList.concat(res.data.data) 
						console.log(this.goodList);
					}
				})
			},
			// 获取店铺列表
			getStore() {
				this.$my.post('/index/merchantStore/getStore', {
					page: this.storePage,
					limit: 10,
					time: this.time,
					number: this.number,
					search_key: this.search_key?this.search_key:'',
					category_id:'',
				}).then(res => {
					this.pageLoading=false;
					if (res.code == 200) {
						this.storeList =this.storeList.concat(res.data.data)
						console.log(res.data, '.......', this.type);
					}
				})
			},
			// 获取工厂列表
			getFactory() {
				this.$my.post('/index/merchantStore/getFactory', {
					page: this.factPage,
					limit: 10,
					time: this.time,
					number: this.number,
					search_key: this.search_key?this.search_key:'',
					category_id:'',
				}).then(res => {
					this.pageLoading=false;
					if (res.code == 200) {
						this.factoryList =this.factoryList.concat(res.data.data)
						console.log(res.data.data);
					}
				})
			}
		},
		onLoad(option) {
			this.type = option.type
			this.search_key = option.keyword
			this.category_id = (option.category_id || option.category_id===0)?option.category_id:''
			if (option.type == 0) {
				this.getgoods()
			} else if (option.type == 1) {
				this.getStore()
			} else if (option.type == 2) {
				this.getFactory()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.input_right {
		width: 180%;
		// border: 1px solid red;
		height: 80rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 20rpx;

	}

	/deep/.u-navbar__content__right {
		left: 10%;
	}

	.activeFac {
		color: $red !important;
		border: 1rpx solid $red !important;
	}

	.active {
		color: #333 !important;
	}

	.li_factory {

		.left {
			border-radius: 8rpx;
			width: 200rpx;
			height: 200rpx;
		}

		.right {
			flex: 1;
			// flex-grow: 1;
			margin-left: 20rpx;
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.li_box {
				.float {
					float: right;
				}

				.yellow {
					background-color: #FFF2D0;
					padding: 0 8rpx;
					margin-right: 20rpx;
					border-radius: 4rpx;
				}

				.pink {
					margin-right: 20rpx;
					background-color: #FFDED3;
					padding: 0 8rpx;
					border-radius: 4rpx;
				}
			}
		}
	}

	.content {
		.top {
			margin-bottom: 32rpx;

			.top_left {
				margin-right: 20rpx;

			}
		}

		.result {
			.all {
				.choice {
					.li {
						.li_btn {

							>view {
								margin-right: 28rpx;
								margin-bottom: 24rpx;

								&:nth-child(3n) {
									margin-right: 0rpx;
								}
							}
						}
					}
				}

				.all_btn {
					width: 60%;
					margin: 0 auto;
					>button {
						width: 160rpx;
						height: 60rpx;
						line-height: 60rpx;
						color: $red !important;
						border: 2rpx solid $red;
						font-size: 24rpx;
						border-radius: 30rpx;
						background-color: white !important;

						&:first-child {
							color: #999999 !important;
							border: 2rpx solid #999999;
						}
					}
				}
			}

			.shop {
				.li {
					margin: 0 auto;
					width: 90%;
					// height: 370rpx;
					background-color: white;
					margin-top: 24rpx;
					border-radius: 16rpx;
					padding: 20rpx;
					box-sizing: border-box;

					.li_top {
						height: 80rpx;
						display: flex;


						.box_center {
							height: 100%;
							flex-grow: 1;
							// background-color: pink;
							margin: 0 20rpx;

							.score {
								color: #FFA848;
								margin-left: 8rpx;
							}

							.deal {
								margin-left: 20rpx;
							}
						}

						.box_right {
							.entry {
								width: 96rpx;
								height: 48rpx;
								padding: 0;
								line-height: 48rpx;
								color: $red;
								border: 2rpx solid $red;
								border-radius: 24rpx;
							}
						}
					}

					.li_center {
						height: 190rpx;
						// background-color: red;
						padding-top: 20rpx;
						padding-bottom: 12rpx;

						.li_img {
							min-width: 190rpx;
							height: 190rpx;
							margin-right: 18rpx;
							border-radius: 8rpx;
							overflow: hidden;
							position: relative;

							.money {
								position: absolute;
								padding: 0 5rpx;
								height: 36rpx;
								background-color: rgba(0, 0, 0, 0.6);
								border-radius: 20rpx 0 0 0;
								right: 0;
								bottom: 0;
								color: white;
							}
						}
					}

					.li_bottom {

						// height: 40rpx;
						// background-color: tomato;
						.li_text {
							padding: 0 8rpx;
						}

						.border {
							display: inline-block;
							border-left: 2rpx solid #999999;
							border-right: 2rpx solid #999999;
						}
					}
				}
			}



			.factory {
				.factory_content {

					.li {
						margin: 0 auto;
						width: 90%;
						height: 240rpx;
						background-color: white;
						margin-top: 24rpx;
						border-radius: 16rpx;
						padding: 20rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;

						.left {
							min-width: 200rpx;
							height: 200rpx;
							background-color: #999999;
						}

						.right {
							flex-grow: 1;
							margin-left: 20rpx;
							// background-color: tomato;

							.li_box {
								.float {
									float: right;
								}

								.yellow {
									margin-top: 10rpx;
									background-color: #FFF2D0;
									padding: 0 8rpx;
									margin-right: 20rpx;
									border-radius: 4rpx;
								}

								.pink {
									margin-top: 10rpx;
									background-color: #FFDED3;
									padding: 0 8rpx;
									border-radius: 4rpx;
								}
							}
						}
					}

				}
			}
		}
	}
</style>
